﻿<html>
<head>
<title>ACM刷题统计-统计</title>
<style type="text/css">
@import url(./img/style.css);
body{
	background-color:#FFF;
	font-size:14px;
}
#printf{
	display: block;
	margin: 10px auto;
}
#acmers{
	height:600px;
	width:980px;
	overflow-x:hidden;
	display:none;
}
#acmers input{
	border:none;
	border-bottom:1px solid #000;
	size:20;
}
#acmers input:focus{
	background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#EBEBEB), to(#878787), color-stop(0.5,#CFCFCF));
	outline-color: #FFF;
}
.acmer_name,.acmer_pku,.acmer_hdu,.acmer_bistu{
	margin:0 10px;
	width: 150px;
	height:1.5em;
	line-height:1.5em;
	display:inline-block;
}
</style>
<script type="text/javascript" src="./js/acmer.js"></script>
<script type="text/javascript" src="./js/storage.js"></script>
<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
function add_line(acmer){
	var oj_status = "";
	
	var newli = document.createElement("ol");  
	var all_solved = 0;
	var all_submitted = 0;
	newli.innerHTML = '<input type="hidden" class="acmer_uid" /><span class="acmer_name"></span><span class="acmer_hdu" ></span><span class="acmer_pku"></span><span class="acmer_bistu" ></span><span class="update_time"></span>';
	var newtr = document.createElement("tr");  
	
	if (acmer.uid)
		newli.getElementsByClassName('acmer_uid')[0].value = acmer.uid;
		
	if (acmer.name){
		newli.getElementsByClassName('acmer_name')[0].innerHTML = acmer.name;
		newtr.innerHTML += "<td>"+ acmer.name +"</td>"
	}else
		newtr.innerHTML += "<td>PE</td>"
		
	if (acmer.oj.hdu){
		switch (acmer.oj.hdu.status){
		case "failed":
			oj_status = ' style="background-color:#FF0005;"';
			break;
		case "loading":
			oj_status = ' style="background-color:#FFDC1D;"';
			break;
		case "ready":
			oj_status = ' style="background-color:#22A8F8;"';
			break;
		default:
			oj_status = '';
		}
		all_solved += acmer.oj.hdu.solved;
		all_submitted += acmer.oj.hdu.submitted;
		newli.getElementsByClassName('acmer_hdu')[0].innerHTML = acmer.oj.hdu.solved + '/'+acmer.oj.hdu.submitted;
		newtr.innerHTML += "<td"+oj_status+">"+ acmer.oj.hdu.solved +"</td>"+ '<td'+oj_status+'>'+acmer.oj.hdu.submitted +"</td>"
	}else
		newtr.innerHTML += "<td>PE</td>"
		
	if ( acmer.oj.pku){
		switch (acmer.oj.pku.status){
		case "failed":
			oj_status = ' style="background-color:#FF0005;"';
			break;
		case "loading":
			oj_status = ' style="background-color:#FFDC1D;"';
			break;
		case "ready":
			oj_status = ' style="background-color:#22A8F8;"';
			break;
		default:
			oj_status = '';
		}
		all_solved += acmer.oj.pku.solved;
		all_submitted += acmer.oj.pku.submitted;
		newli.getElementsByClassName('acmer_pku')[0].innerHTML = acmer.oj.pku.solved + '/'+acmer.oj.pku.submitted;
		newtr.innerHTML += "<td"+oj_status+">"+ acmer.oj.pku.solved  +"</td>"+ '<td'+oj_status+'>'+acmer.oj.pku.submitted +"</td>"
	}else
		newtr.innerHTML += "<td>PE</td>"
		
	if (acmer.oj.bistu){
		switch (acmer.oj.bistu.status){
		case "failed":
			oj_status = ' style="background-color:#FF0005;"';
			break;
		case "loading":
			oj_status = ' style="background-color:#FFDC1D;"';
			break;
		case "ready":
			oj_status = ' style="background-color:#22A8F8;"';
			break;
		default:
			oj_status = '';
		}
		all_solved += acmer.oj.bistu.solved;
		all_submitted += acmer.oj.bistu.submitted;
		newli.getElementsByClassName('acmer_bistu')[0].innerHTML = acmer.oj.bistu.solved + '/'+acmer.oj.bistu.submitted;
		newtr.innerHTML += "<td"+oj_status+">"+ acmer.oj.bistu.solved +"</td>"+ '<td'+oj_status+'>'+acmer.oj.bistu.submitted +"</td>"
	}else
		newtr.innerHTML += "<td>PE</td>"

	newtr.innerHTML += "<td>"+all_solved+"</td><td>"+all_submitted+"</td>"
		
	if (acmer.updatetime){
		var date = new Date(acmer.updatetime);
		newli.getElementsByClassName('update_time')[0].innerHTML = date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate()+' '+date.getHours()+':'+date.getMinutes();
		newtr.innerHTML += "<td>"+ date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate()+' '+date.getHours()+':'+date.getMinutes() +"</td>"
	}else
		newtr.innerHTML += "<td>PE</td>"
	
	//newdiv.setAttribute('style','-webkit-transition: all 1s ease-in-out;' );
	document.getElementById('acmers').appendChild(newli);  
	document.getElementById('printf').getElementsByTagName("tbody")[0].appendChild(newtr);  
} 
function onload(){
	chrome.extension.sendRequest({"hope": "get_acmer_list"}, function(response) {
		var i;
		for (i =0;i < response.length;i++){
			add_line(response[i]);
		}
		$("#printf").tablesorter();
		$("#printf").tablesorter( {sortList: [[7,1], [8,0]]} );
	});

}
function refresh_list(){
	var i = 0;
	/*
	for (i = 0;i < storage.acmers.list.length;i+++){
		storage.acmers.list[i].oj.hdu.updatetime = 0;		
		storage.acmers.list[i].oj.pku.updatetime = 0;		
		storage.acmers.list[i].oj.bistu.updatetime = 0;		
	}
	*/
	chrome.extension.sendRequest({"hope": "update_oj"}, function(response) {
		if (response.status == "loading"){
			alert("正在更新着...");
			location.reload();
		}	
	});
}
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
		switch(request.hope)
		{
		case "refresh_page_rank":
			if (document.getElementById("autoreload").checked)
				location.reload();
			break;
		}
		
	}
 );

</script>
</head>
<body onload = "onload()">
<a href="javascript:void(0);" onclick = "refresh_list()" >更新数据</a>
<a href="./options.html">设置</a><span style="background-color:#FF0005;margin-left: 5px;">更新失败</span><span>|</span><span>更新成功</span><span>|</span><span style="background-color:#FFDC1D;">正在更新</span><span>|</span><span style="background-color:#22A8F8;">没有数据</span>|<label><input name="autoreload" id="autoreload" type="checkbox" value="" checked/>有新数据时自动重载页面</label>
<table id="printf" class="tablesorter" width="980" border="1" cellpadding="1" cellspacing="0">
  <thead>
	  <tr>
		<th scope="col">姓名</th>
		<th scope="col">HDU(AC)</th>
		<th scope="col">HDU(Submit)</th>
		<th scope="col">PKU(AC)</th>
		<th scope="col">PKU(Submit)</th>
		<th scope="col">BISTU(AC)</th>
		<th scope="col">BISTU(Submit)</th>
		<th scope="col">ALL(AC)</th>
		<th scope="col">ALL(Submit)</th>
		<th scope="col">更新时间</th>
	  </tr>
  </thead>
  <tbody> 
  </tbody>
</table>
<ul id="acmers">
<ol><span type="text" class="acmer_name">姓名</span><span class="acmer_hdu" >HDU_ID</span><span class="acmer_pku" >PKU_ID</span><span class="acmer_bistu" >BISTU_ID</span></ol>
</ul>
</body>
</html>